import React, { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';
class View extends Component {
    constructor(props){

        super(props);
    }
    lists(){
        const list = this.props.data.map((val,key)=>{
            return(
                <li key={key}>
                       <span>{val.text}</span>
                </li>
            )
        })
        return list;
    }
    render(){
        const { onAdd,data } = this.props;
        // console.log(data)
        return(
            <React.Fragment>
                <div onClick={onAdd}>点我点</div>
                <ul>{data.length!==0 ? this.lists() : ''}</ul>
            </React.Fragment>
        )
    }
}

//需要渲染什么数据
//作为函数，mapStateToProps执行后应该返回一个对象
function mapStateToProps(state) {
  return {
      data:state.first
  }
}
//是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		onAdd: () => dispatch(actions.add('id'))
	}
};
export default connect(mapStateToProps,mapDispatchToProps)(View);
